<template>
  <div class="clickDiv">
    <div class="title">点点点</div>
    <button @click="startGames">开始游戏</button>
    <button>重新开始</button>
    <button @click="outGames">退出游戏</button>
    <div class="lishi">历史得分</div>
  </div>
</template>

<script>
  export default {
    name: "click-div",
    data() {
      return {}
    },
    mounted(){
      mui.init({
        keyEventBind: {
          backbutton: false //关闭back按键监听
        }
      });
    },
    methods: {
      startGames() {
        this.$router.push({'path': "/startGames?showHead=1"})
      },
      outGames() {
        var that = this;
        var btnArray = ['否', '是'];
        mui.confirm("确定退出游戏吗？", "提示", btnArray, function (e) {
          if (e.index == 1) {
            that.$router.replace({path: '/index/mine'});
          }
        },'div');
      }
    }
  }
</script>

<style lang="scss">
  .clickDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title {
      font-weight: bold;
      font-size: 36px;
      color: red;
      margin-bottom: 30%;
    }
    button {
      width: 80%;
      height: 48px;
      background: lightcoral;
      color: white;
      margin-bottom: 15px;
      border: none;
      outline: none;
    }

    .lishi {
      width: 80%;
      height: 50px;
      text-align: right;
      margin-top: 20px;
      font-size: 18px;
      color: blue;
    }

  }
</style>
